<div class="memo-container">
    <div class="calendar-wrapper">
        <nz-calendar [nzDateCell]="dateCellTpl" [(ngModel)]="currentDate" (nzSelectChange)="dateChange()"></nz-calendar>
    </div>
    <nz-divider class="divider" nzType="vertical"></nz-divider>
    <div class="memo-wrapper">
        <div class="memo-header">
            <span class="current-date">{{currentDate | date:'yyyy-MM-dd'}}</span>
            <div class="tabs">
                <div class="tab-item" [ngClass]="{'active': tab === 'system'}" (click)="changeTab('system')">系统备忘</div>
                <div class="tab-item" [ngClass]="{'active': tab === 'person'}" (click)="changeTab('person')">个人备忘</div>
            </div>
        </div>
        <div class="memo-list">
            <ng-container *ngIf="tab === 'system'">
                <ng-container *ngIf="systemMemoItems && systemMemoItems.length;else noDataTpl">
                    <div class="memo-item" *ngFor="let item of systemMemoItems">
                        <zepride-memo-item [memoItem]="item" (delete)="deleteItem($event)"></zepride-memo-item>
                    </div>
                </ng-container>
            </ng-container>
            <ng-container *ngIf="tab === 'person'">
                <ng-container *ngIf="personMemoItems && personMemoItems.length;else noDataTpl">
                    <div class="memo-item" *ngFor="let item of personMemoItems">
                        <zepride-memo-item [memoItem]="item" (delete)="deleteItem($event)"></zepride-memo-item>
                    </div>
                </ng-container>
            </ng-container>
        </div>
        <div class="add-btn" (click)="addMemoItem()" *ngIf="tab==='person'">
            <div class="btn-content-wrapper">
                <i class="plus-icon" nz-icon nzType="plus" nzTheme="outline"></i>
                <span>添加个人备忘</span>
            </div>
        </div>
    </div>
</div>

<ng-template let-date #dateCellTpl>
    <span class="holiday-sign" *ngIf="checkIsHoliday(date)">假</span>
    <ul class="calendar-memo-item">
        <li class="memo-item-badge" *ngFor="let item of getDataByDay(date);let index=index">
            <ng-container *ngIf="index < maxLength">
                <ng-container *ngIf="tab==='person'">
                    <div class="dot"></div>
                    <div class="content">{{item.title}}</div>
                </ng-container>
                <ng-container *ngIf="tab==='system'">
                    <div class="dot"></div>
                    <div class="content" [innerHTML]="item.title"></div>
                </ng-container>
            </ng-container>
        </li>
    </ul>
</ng-template>

<ng-template #noDataTpl>
    <div class="no-data">
        <span>暂无数据</span>
    </div>
</ng-template>